<template>
  <div class="detail-container">
    <!-- 头部概览 -->
    <div class="header">
      <RouterLink to="/Home"> <div class="back">首页&nbsp;</div> </RouterLink>
      /
      <RouterLink to="/Service">
        <div class="back">&nbsp;云市场&nbsp;</div>
      </RouterLink>
      /
      {{ shopData.name }}
    </div>
    <!-- 中部区域 -->
    <div class="center-container">
      <!-- 中部主要区域 -->
      <div class="main-wrapper">
        <!-- 展示主区域 -->
        <div class="main-area">
          <!-- logo部分 -->
          <div class="logo">
            <img :src="shopData.imgUrl" alt="" />
          </div>
          <!-- 主区域内容区 -->
          <div class="main-content">
            <!-- 产品标题 -->
            <div class="title">{{ shopData.name }}</div>
            <!-- 产品描述 -->
            <div class="desc">{{ shopData.desc }}</div>
            <!-- 产品售卖信息 -->
            <div class="info">
              <div class="left">
                <div class="price-container">
                  价格:
                  <div class="price">
                    ￥
                    <span>{{ sale }}</span>
                  </div>
                </div>
                <div class="limit">限时优惠</div>
                <div class="ori-price">
                  ￥
                  <span>{{ price }}</span>
                </div>
              </div>
              <div class="right">
                <count-down :endTime="this.shopData.endTime" />
              </div>
            </div>
            <!-- 套餐版本 -->
            <div class="package">
              <span>套餐版本:</span>
              <div class="item-container">
                <div
                  class="item"
                  @click="handlePackageSelected(i)"
                  :class="i == selectedPackageIndex ? 'selected' : ''"
                  v-for="(item, i) in shopData.package"
                  :key="shopData.package[i].id"
                >
                  {{ shopData.package[i].value }}元 /
                  {{ shopData.package[i].number }}次
                </div>
              </div>
            </div>
            <!-- 购买时长 -->
            <div class="time">
              <span>购买时长:</span>
              <div class="item-container">
                <div
                  class="item"
                  @click="handleTimeSelected(i)"
                  :class="i == selectedTimeIndex ? 'selected' : ''"
                  v-for="(item, i) in shopData.time"
                  :key="shopData.time[i]"
                >
                  {{ shopData.time[i] }}年内有效
                </div>
              </div>
            </div>
            <!-- 按钮 -->
            <div class="bt-container">
              <button class="pay" @click="handlePay(shopData.name)">
                立即购买
              </button>
              <button class="consult">立即咨询</button>
            </div>
          </div>
        </div>
        <!-- 服务详情 -->
        <div class="service-detail-container">
          <div class="service-detail">服务详情</div>
        </div>
      </div>
      <!-- 侧边菜单 -->
      <div class="sideBar">
        <div class="security">
          <img src="@/assets/detail/security.png" alt="" />
        </div>
        <div class="fast">
          <img src="@/assets/detail/fast.png" alt="" />
        </div>
        <div class="recommend">
          <div class="recommend-title">推荐产品</div>
          <div class="recommend-item-container">
            <div class="recommend-item">
              <div class="pro-img">
                <img src="@/assets/service/test.png" alt="" />
              </div>
              <div class="pro-content">
                <div class="pro-title">【图像识别OCR】简单图片识别</div>
                <div class="pro-desc">
                  适用于大图文字简单提取凑字数凑字数两行
                </div>
              </div>
            </div>
            <div class="recommend-item">
              <div class="pro-img">
                <img src="@/assets/service/test.png" alt="" />
              </div>
              <div class="pro-content">
                <div class="pro-title">【图像识别OCR】简单图片识别</div>
                <div class="pro-desc">
                  适用于大图文字简单提取凑字数凑字数两行
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 关于公司 -->
    <div class="about-container">
      <div class="about-item" v-for="item in aboutItems" :key="item.imgSrc">
        <div class="logo">
          <img :src="item.imgSrc" alt="" />
        </div>
        <div class="title">
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import countDown from "@/components/countDown";
export default {
  components: {
    countDown,
  },
  data() {
    return {
      selectedPackageIndex: null,
      selectedTimeIndex: null,
      selectedSale: null,
      selectedPrice: null,
      selectedTime: null,
      //  console.log(endTime)=>得到毫秒  1658030420 可在方法里面放入后台数据,new Date('放后台数据').getTime() / 1000 +  ' ',但要记得调用方法
      shopData: {
        imgUrl: require("@/assets/detail/send.png"),
        name: "【短信服务】短信验证码",
        desc: "【三网合一短信接口-短信验证码-验证码短信接口-短信群发，到达仅3秒】短信验证码通知类API，电信移动联通短信服务，99%到达率。适用于验证码短信、触发短信、短信通知、会员短信提醒等应用，支持虚拟运营商短信发送。",
        package: [
          {
            id: "p1",
            value: "0.01",
            oriValue: "2.00",
            number: "500",
          },
          {
            id: "p2",
            value: "83.3",
            oriValue: "200.00",
            number: "1000",
          },
          {
            id: "p3",
            value: "702.8",
            oriValue: "2000.00",
            number: "1w",
          },
          {
            id: "p4",
            value: "5602.8",
            oriValue: "20000.00",
            number: "10w",
          },
          {
            id: "p5",
            value: "7002.8",
            oriValue: "25000.00",
            number: "20w",
          },
          {
            id: "p6",
            value: "18482.8",
            oriValue: "30000.00",
            number: "100w",
          },
          {
            id: "p7",
            value: "38999.8",
            oriValue: "50000.00",
            number: "300w",
          },
          {
            id: "p8",
            value: "38999.8",
            oriValue: "50000.00",
            number: "300w",
          },
        ],
        time: ["1", "2"],
        endTime: "1661941299",
      },
      aboutItems: [
        {
          imgSrc: require("@/assets/index/about/anytime.png"),
          title: "7×24小时服务支持",
        },
        {
          imgSrc: require("@/assets/index/about/price.png"),
          title: "价格公开透明",
        },
        {
          imgSrc: require("@/assets/index/about/count.png"),
          title: "灵活计费",
        },
        {
          imgSrc: require("@/assets/index/about/serve.png"),
          title: "专属客服服务",
        },
      ],
    };
  },
  created() {
    this.selectedSale = this.shopData.package[0].value;
    this.selectedPrice = this.shopData.package[0].oriValue;
    this.selectedTime = this.shopData.time[0];
    this.selectedPackageIndex = 0;
    this.selectedTimeIndex = 0;
  },
  methods: {
    handlePay(shopname) {
      this.$router.push({
        name: "Step1",
        params: {
          shopName: shopname,
        },
      });
    },
    handlePackageSelected(index) {
      this.selectedPackageIndex = index;
      this.selectedSale = this.shopData.package[index].value;
      this.selectedPrice = this.shopData.package[index].oriValue;
    },
    handleTimeSelected(index) {
      this.selectedTimeIndex = index;
      this.selectedTime = this.shopData.time[index];
    },
  },
  computed: {
    sale: function () {
      const val = this.selectedSale * this.selectedTime;
      var value = Math.round(parseFloat(val) * 100) / 100;
      var xsd = value.toString().split(".");
      if (xsd.length == 1) {
        value = value.toString() + ".00";
        return value;
      }
      if (xsd.length > 1) {
        if (xsd[1].length < 2) {
          value = value.toString() + "0";
        }
        return value;
      }
    },
    price: function () {
      const val = this.selectedPrice * this.selectedTime;
      var value = Math.round(parseFloat(val) * 100) / 100;
      var xsd = value.toString().split(".");
      if (xsd.length == 1) {
        value = value.toString() + ".00";
        return value;
      }
      if (xsd.length > 1) {
        if (xsd[1].length < 2) {
          value = value.toString() + "0";
        }
        return value;
      }
    },
  },
};
</script>

<style scoped lang="less">
@import "~@/styles/var.less";
.detail-container {
  min-height: 791px;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    padding: 24px 0 24px 360px;
    font-size: 12px;
    .back {
      color: @primary;
    }
  }
  .center-container {
    flex: 1 1 auto;
    display: flex;
    column-gap: 48px;
    .main-wrapper {
      display: flex;
      flex-direction: column;
      width: 886px;
      margin-left: 360px;
      .main-area {
        display: flex;
        column-gap: 24px;

        .logo {
          flex: 0 0 auto;
          width: 96px;
          height: 96px;
          border-radius: 8px;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .main-content {
          display: flex;
          flex-direction: column;
          row-gap: 12px;
          .title {
            font-size: 20px;
          }
          .desc {
            color: #666666;
            font-size: 14px;
          }
          .info {
            margin-top: 20px;
            margin-bottom: 4px;
            height: 88px;
            background: linear-gradient(270deg, #fcfcfc 0%, #f7f7f7 100%);
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-sizing: border-box;
            padding: 32px 24px 32px 22px;
            font-size: 14px;
            color: #666666;
            .left {
              display: flex;
              align-items: center;
              column-gap: 8px;
              .price-container {
                align-items: center;
                color: #333;
                display: flex;
                column-gap: 8px;
                .price {
                  color: #ff4949;
                  display: flex;
                  align-items: baseline;
                  font-size: 16px;
                  span {
                    font-size: 32px;
                  }
                }
              }
              .limit {
                width: 64px;
                height: 24px;
                line-height: 24px;
                text-align: center;
                background: #ff4949;
                border-radius: 12px;
                font-size: 12px;
                color: #fff;
              }
              .ori-price {
                text-decoration: line-through;
              }
            }
            .right {
            }
          }
          .package,
          .time {
            display: flex;
            column-gap: 10px;
            font-size: 14px;
            span {
              white-space: nowrap;
              line-height: 36px;
              height: 36px;
            }
            .item-container {
              display: flex;
              row-gap: 12px;
              column-gap: 12px;
              flex-wrap: wrap;
              .item {
                box-sizing: border-box;
                padding: 0 12px;
                text-align: center;
                white-space: nowrap;
                line-height: 36px;
                height: 36px;
                border-radius: 2px;
                border: 1px solid #ededed;
                cursor: pointer;
                position: relative;
                &.selected {
                  border: 1px solid @primary;
                  &::after {
                    position: absolute;
                    width: 16px;
                    height: 16px;
                    top: 0;
                    right: 0;
                    display: block;
                    content: "";
                    background: url("~@/assets/detail/selected.png");
                    background-size: 100% 100%;
                  }
                }
              }
            }
          }
          .bt-container {
            display: flex;
            padding-left: 70px;
            column-gap: 24px;
            margin-top: 12px;
            .pay,
            .consult {
              width: 200px;
              height: 48px;
              line-height: 48px;
              text-align: center;
              border-radius: 4px;
              font-size: 18px;
              border: none;
              cursor: pointer;
            }
            .pay {
              background: @primary;
              color: #fff;
            }
            .consult {
              border: 1px solid @primary;
              color: @primary;
              background-color: #fff;
            }
          }
        }
      }
      .service-detail-container {
        margin-top: 28px;
        width: 100%;
        border-bottom: 1px solid #ededed;
        .service-detail {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          border-bottom: 2px solid @primary;
        }
      }
    }
    .sideBar {
      display: flex;
      flex-direction: column;
      row-gap: 16px;
      .security {
        img {
          width: 266px;
          height: 376px;
        }
      }
      .fast {
        cursor: pointer;
        img {
          width: 266px;
          height: 76px;
        }
      }
      .recommend {
        display: flex;
        flex-direction: column;
        width: 266px;
        border-radius: 4px;
        overflow: hidden;
        .recommend-title {
          color: #fff;
          background: @primary;
          text-align: left;
          height: 40px;
          line-height: 40px;
          padding-left: 16px;
        }
        .recommend-item-container {
          border-left: 1px solid #ededed;
          border-right: 1px solid #ededed;
          padding: 0 16px 0 14px;
          margin-bottom: 24px;
          .recommend-item {
            display: flex;
            column-gap: 12px;
            align-items: center;
            height: 120px;
            box-sizing: border-box;
            border-bottom: 1px solid #ededed;
            .pro-img {
              width: 64px;
              height: 64px;
              border-radius: 4px;
              overflow: hidden;
              flex: 0 0 auto;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
            }
            .pro-content {
              display: flex;
              flex-direction: column;
              row-gap: 4px;
              flex: 1 1 auto;
              .pro-title {
                color: #333;
              }
              .pro-desc {
                color: #666666;
                font-size: 14px;
              }
            }
          }
        }
      }
    }
  }
  // 关于公司
  .about-container {
    flex: 0 0 auto;
    background-color: #303030;
    color: #fff;
    padding: 56px 420px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    .about-item {
      display: flex;
      column-gap: 16px;
      align-items: center;
      .logo {
        width: 48px;
        height: 48px;
      }
    }
  }
}
</style>